<!-- 遮罩层 -->
<template>
  <uni-transition
    :show="show"
    custom-class="aster-overlay"
    :duration="duration"
    :styles="overlayStyle"
    @click="clickHandler"
  >
    <slot></slot>
  </uni-transition>
</template>
<script setup lang="ts">
  import { deepMerge } from '@/utils';
  import { computed } from 'vue';

  const emits = defineEmits(['click']);

  const props = defineProps({
    // 是否显示遮罩
    show: {
      type: Boolean,
      default: () => false,
    },
    // 层级z-index
    zIndex: {
      type: [String, Number],
      default: () => 10070,
    },
    // 遮罩的过渡时间，单位为ms
    duration: {
      type: [String, Number],
      default: () => 300,
    },
    // 不透明度值，当做rgba的第四个参数
    opacity: {
      type: [String, Number],
      default: () => 0.5,
    },
    // 定义需要用到的外部样式
    customStyle: {
      type: [Object, String],
      default: () => {},
    },
  });

  const overlayStyle = computed(() => {
    const style = {
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      zIndex: props.zIndex,
      bottom: 0,
      'background-color': `rgba(0, 0, 0, ${props.opacity})`,
    };
    return deepMerge(style, props.customStyle);
  });

  const clickHandler = () => {
    emits('click');
  };
</script>
<style lang="scss" scoped>
  view,
  scroll-view,
  swiper-item {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: auto;
    align-items: stretch;
    align-content: flex-start;
  }

  .aster-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
  }
</style>
